<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

	<div id="box" class="box2" style="background: red;" name="111" houying="222">
		<h1>
			div的子元素
		</h1>
	</div>
<script type="text/javascript">
	/*
		DOM:document object Model 文档对象模型

		1.dom是html的标准模型，通过它，js可以访问和改变html文档里的所有元素
		2.dom树 
			
			dom节点对象：
				1.文档节点 document 
				2.元素节点 html元素 div元素 a元素
				3.属性节点 标签的属性 href src alt title....
				4.文本节点 标签里的文字内容（换行 空格都属于文本）

	*/
	//1.文档节点 document 浏览器在加载页面的时候，会给网页document对象
	//所有的节点都是document对象的子节点
	console.log(document)
	console.dir(document)

	//2.元素节点 html div a
	//通过id获取元素节点

	let box = document.getElementById('box')
	console.log(box)

	//3.属性节点  标签的属性 href src alt title....
	// 元素节点.属性名 有缺点 类似name属性的无法获取 ------ 元素节点.getAttribute('属性名')
	console.log(box.style)
	//获取类名
	console.log(box.className)
	console.log(box.id)
	console.log(box.name) //undefined
	console.log(box.huoying) //undefined
	console.log(box.getAttribute("name")) //111
	//4.文本节点 
	// innerText 纯文本
	// innerHTML 能识别html
	console.log(box.innerText) //div子元素
	console.log(box.innerHTML) //<h1>div的子元素</h1>

	//修改文本节点
	box.innerText = "今日阳光明媚"
	box.innerHTML = "<h1>今日阳光明媚</h1>"
	box.innerHTML = "<h1 style='color:#fff'>今日阳光明媚</h1>"


</script>
</body>
</html>